<template>
  <div class="all">
    <van-nav-bar
      left-text="返回"
      :title="blog.title"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 用户信息 -->
    <div class="head">
      <van-row class="UserInfo" align="center" type="flex" gutter="0">
        <van-col span="3">
          <van-image
            fit="cover"
            round
            width="1.5rem"
            height="1.5rem"
            :src="user.avatar"
          />
        </van-col>
        <van-col span="3">{{ user.username }}</van-col>
      </van-row>
      <!-- 发布时间/浏览量 -->
      <van-row class="date_lll">
        <van-col span="5">{{ bCDate }}</van-col>
        <van-col span="19">浏览量：{{ blogAction.page_views }}</van-col>
      </van-row>
    </div>
    <!-- 分割线 -->
    <van-divider content-position="left">内容</van-divider>
    <div class="content">
      <p>
        {{ content.content }}
      </p>
      <van-tag :color="style()" v-for="item in tags" :key="item.id">{{
        item.tagName
      }}</van-tag>
      <van-divider />
      <van-row>
        <van-col span="8">评论：{{ blogAction.comments }}</van-col>
        <van-col span="8">收藏：{{ blogAction.collect }}</van-col>
        <van-col span="8">赞：{{ blogAction.like }}</van-col>
      </van-row>
    </div>
    <!-- 评论区 -->
    <div class="comment-area">
      <van-cell-group>
        <van-field
          v-model="input"
          left-icon="comment-circle-o"
          right-icon="flower-o"
          placeholder="评论"
        />
      </van-cell-group>
      <div v-if="commentsPage.total != 0">
        <van-cell
          v-for="(item, index) in blogAction.data"
          :key="index"
          title="我是用户名"
          icon="location-o"
          label="我是内容"
        >
          <template #right-icon>
            <div class="area">
              <van-icon
                name="thumb-circle-o"
                :color="area_icon"
                size="1.5rem"
                style="margin-bottom: 3px; margin-top: 5px"
              />
              <p class="area_p">commentsPage.total</p>
            </div>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetailsAPI } from "@/api";
export default {
  data() {
    return {
      blog: {},
      blogAction: {},
      content: {},
      commentsPage: {},
      tags: null,
      user: {},
      bCDate: "",
      input: "",
      area_icon: "inherit",
    };
  },
  async created() {
    await this.GetDetails();
  },
  methods: {
    // 获取文章信息
    async GetDetails() {
      let id = this.$route.query.id;
      let res = await getDetailsAPI({
        id,
      });
      // 博客
      this.blog = res.data.data.blog;
      // 博客数据
      this.blogAction = res.data.data.blogAction;
      // 发布博客时间
      this.bCDate = res.data.data.blogCreateDate;
      // 评论
      this.commentsPage = res.data.data.commentsPage;
      // 博客内容
      this.content = res.data.data.content;
      // 博客标签
      this.tags = res.data.data.tags;
      // 发布博客用户
      this.user = res.data.data.user;
      console.log(this.commentsPage);
    },

    // 随机颜色
    style() {
      let R = Math.floor(Math.random() * 255);
      let G = Math.floor(Math.random() * 255);
      let B = Math.floor(Math.random() * 255);
      return "rgb(" + R + "," + G + "," + B + ")";
    },
  },
};
</script>

<style scoped>
.all {
  height: 100vh;
  background-color: #f7f8f9;
}
.head {
  margin-top: 2%;
  margin-left: 2%;
}
.date_lll {
  margin-top: 1rem;
  color: #b5b5b5;
  font-size: 0.5rem;
}
.content {
  width: 94%;
  margin-left: 2%;
  padding-top: 2px;
  padding-left: 5px;
  padding-bottom: 10px;
  border-radius: 0.5rem;
  background-color: #ffffff;
}
.van-tag {
  margin-left: 0.3rem;
  margin-top: 1rem;
}
.van-col {
  display: flex;
  justify-content: center;
}
.comment-area {
  width: 94%;
  margin-left: 2%;
  padding-top: 2px;
  padding-left: 5px;
  padding-bottom: 10px;
  border-radius: 0.5rem;
  background-color: #ffffff;
}
.area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.area_p {
  font-weight: 300;
  font-size: 5px;
}
</style>
